<template>
	<view class="">
		<uni-popup ref="orderPopup" safe-area>
			<view class="server-order-popup">
				<image class="close-icon" src="../../static/login/clear.png" mode=""></image>
				<view class="inner-content">
					<view class="server-info">
						<image class="server-img" :src="massageOrderInfo.image" mode=""></image>
						<view class="server-desc">
							<view class="title">{{massageOrderInfo.name}}</view>
							<view class="prcie">
								{{massageOrderInfo.price}}<text>元/次</text>
							</view>
							<view class="num-box">
								<uni-number-box background="#E4E5E7" :min="1" :max="9" :value="nums"  @change="inputChange"/>
							</view>
						</view>
					</view>
				</view>
				<view class="addres-content" v-if="addressData && addressData.id" @click="chooseAddress">
					<view class="addres-info">
						<view class="address-text">{{addressData.province+'-'+addressData.city+'-'+addressData.district+'-'+addressData.address}}</view>
						<view class="user-info">
							<view>{{addressData.technician_nickname || addressData.real_name}} </view>
							<view>{{addressData.mobile}}</view>
						</view>
					</view>
					<uni-icons type="right" size="18" color="#939393" ></uni-icons>
				</view>
				<view class="inner-content">
					<view class="top-lines" @click="chooseTime">
						<view class="box-title">
							服务时间
						</view>
						<view class="right-time">
							<view class="time">{{selectiveTime.week}} {{selectiveTime.time}}</view>
							<uni-icons type="right" size="18" color="#939393" ></uni-icons>
						</view>
					</view>
				</view>
				<view class="inner-content"  v-if="voucher.reduction_price">
					<!-- v-if="voucher.price" -->
					<view class="top-lines" @click="tovoucher">
						<view class="box-title">
							代金券
						</view>
						<view class="right-time">
							<view class="price" style="color: #EF5233;font-weight: 500;">-{{voucher.reduction_price}}¥</view>
							<uni-icons type="right" color="#939393" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<view class="inner-content">
					<view class="top-lines">
						<view class="box-title">
							服务人员
						</view>
					</view>
					<view class="technician-info">
						<view class="technician">
							<image class="technician-img" :src="selectiveTechnician.work_clothes_image" mode=""></image>
							<view class="right-technician-info">
								<view class="user-name">{{selectiveTechnician.technician_nickname || selectiveTechnician.real_name}}</view>
								<view class="age-address">
									<view style="margin-right: 10rpx;">{{selectiveTechnician.age}}</view>
									<view>{{selectiveTechnician.city}}</view>
								</view>
								<view class="distance">
									<image :src="$util.imgurl('/imgs/massage/address.png')" mode=""></image>
									<view>{{selectiveTechnician.juli/1000}}km</view>
								</view>
							</view>
						</view>
						<view class="huan-content" @click="choosePeople">
							<image :src="$util.imgurl('/imgs/massage/huan.png')" mode=""></image>
							<view>重新选人</view>
						</view>
					</view>

				</view>
				<view class="inner-content">
					<view class="top-lines">
						<view class="box-title">
							订单备注
						</view>
					</view>
					<view class="order-comments">
						<textarea name="" id="" v-model="desc" adjust-position cols="30" rows="50"></textarea>
					</view>
				</view>
				<view class="inner-content">
					<view class="top-lines">
						<view class="box-title">
						{{payInfo.is_night ? '夜间交通费':'远程交通费'}}	 <text class="cost-hint">( {{payInfo.free_distance}}公里起收: 来程{{payInfo.distance}}公里)</text>
						</view>
						<view class="right-time">
							<view class="price">¥{{payInfo.initial_distance_price}}</view>
						</view>
					</view>
				</view>
				
				<!-- <view class="inner-content">
					<view class="paytype">
						<radio-group @change="radioChange" class="paytype">
							<label class="paytype-lines" v-for="(item, index) in items"
								:key="item.value">
								<image :src="item.img" mode=""></image>
								<view>{{item.name}}</view>
								<view style="margin-left: auto;">
									<radio :value="item.value" style="transform:scale(0.6)" :checked="index === current" />
								</view>
							</label>
						</radio-group>
					</view>
				</view> -->
				
			</view>
			<view class="right-pay" @click="trueCreatorder">
				<button>立即支付 {{payInfo.price}}元</button>
			</view>
		</uni-popup>
		<uni-popup ref="addresspopup" type="bottom">
			<view style="background-color: #fff;height: 70vh;">
				<addressList @addressResult="addressResult"></addressList>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "serverOrder",
		props:{
			id:{
				type:[Number,String],
				default:0
			}
		},
		data() {
			return {
				nums: 1,
				current:0,
				payInfo:{},
				selectiveTechnician:{},
				selectiveTime:{},
				massageOrderInfo:{},
				addressData:{},
				voucher:{},
				desc:""
			}
		},
		mounted() {
			this.getAddress()
			this.getVoucher()
		},
		methods: {
			inputChange(data){
				// console.log(data)
				this.nums = data
				this.creatOrder()
			},
			addressResult(data){
				// console.log(data)
				this.addressData = data
				this.$refs.addresspopup.close()
			},
			initializationData(){
				this.selectiveTechnician = getApp().globalData.selectiveTechnician
				this.selectiveTime = getApp().globalData.selectiveTime
				this.massageOrderInfo = getApp().globalData.massageOrderInfo
				this.voucher = getApp().globalData.selectVoucher
				this.creatOrder()
			},
			show() {
				this.$refs.orderPopup.open('bottom')
				this.nums = 1
				
			},
			chooseAddress(){
				this.$refs.addresspopup.open('bottom')
				// uni.navigateTo({
				// 	url:'/otherpages/setting/address/address'
				// })
			},
			choosePeople(){
				this.$emit('changetechnician')
				uni.navigateTo({
					url:'/otherpages/search/searchDetail'
				})
			},
			chooseTime(){
				uni.navigateTo({
					url:'/otherpages/massage/time'
				})
			},
			tovoucher(){
				uni.navigateTo({
					url:'/otherpages/massage/voucher?type=0'
				})
			},
			creatOrder(){
				var that = this
				var obj = {
					day:this.selectiveTime.day,
					service_id: this.massageOrderInfo.service_id?this.massageOrderInfo.service_id:this.id, 
					service_spec_id:this.massageOrderInfo.spec_id?this.massageOrderInfo.spec_id:this.massageOrderInfo.id,
					num:this.nums,
					address_id: this.addressData.id,
					technician_id:this.selectiveTechnician.id,
					user_ticket_id:this.voucher.user_ticket_id?this.voucher.user_ticket_id:'',
					time:this.selectiveTime.time
				}
				this.request.httpTokenRequest({
					url: "order/getPrice",
					method: "post"
				}, obj).then(function(data) {
					if (data.code == 0) {
						that.payInfo = data.data
					} else {
						
					}
				})
			},
			trueCreatorder(){
				var that = this
				var obj = {
					day:this.selectiveTime.day,
					service_id: this.massageOrderInfo.service_id?this.massageOrderInfo.service_id:this.id, 
					service_spec_id:this.massageOrderInfo.spec_id?this.massageOrderInfo.spec_id:this.massageOrderInfo.id,
					num:this.nums,
					address_id: this.addressData.id,
					technician_id:this.selectiveTechnician.id,
					user_ticket_id:this.voucher.user_ticket_id,
					time:this.selectiveTime.time,
					remark:this.desc
				}
				this.request.httpTokenRequest({
					url: "order/createServiceOrder",
					method: "post"
				}, obj).then(function(data) {
					if (data.code == 0) {
						that.$util.msg(data.msg)
						that.toPay(data.data.order_id)
					} else {
						that.$util.msg(data.msg)
					}
				})
			},
			toPay(order_id){
				uni.navigateTo({
					url:'/otherpages/pay/pay?order_id='+order_id
				})
			},
			getAddress(){
				var that = this
				this.request.httpTokenRequest({
					url: "user_address/index",
					method: "post"
				}, {}).then(function(data) {
					if (data.code == 0) {
						that.addressData = data.data.data[0]
					} else {
				
					}
				})
			},
			getVoucher(){ //获取代金券
				var that = this
				this.request.httpTokenRequest({
					url: "ticket/myTicket",
					method: "post"
				}, {}).then(function(data) {
					if (data.code == 0) {
						that.voucher = data.data.data[0]
						getApp().globalData.selectVoucher = that.voucher
					} else {
				
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.server-order-popup {
		background-color: #F5F7F8;
		padding: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		max-height: 70vh;
		overflow: hidden;
		overflow-y: scroll;
		.close-icon{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: -100rpx;
			left: 0;
		}
		.inner-content {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		.server-info {
			display: flex;
			align-items: flex-start;

			.server-img {
				width: 160rpx;
				height: 214rpx;
				flex: 0 0 auto;
			}

			.server-desc {
				margin-left: 21rpx;
				flex: 0 1 auto;
				width: 100%;
				.title {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #0F0807;
				}

				.prcie {
					display: flex;
					align-items: center;
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #EF5233;
					margin-top: 29rpx;

					text {
						font-size: 18rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #EC2700;
					}
				}

				.num-box {
					width: fill-content;
					margin-top: 52rpx;
					margin-left: 260rpx;
				}
			}
		}
	}

	.addres-content {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		align-items: center;
		background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/address-bg.png')no-repeat;
		background-size: 100% 100%;
		margin-bottom: 30rpx;

		.addres-info {
			.address-text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #151616;
			}

			.user-info {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #151616;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
			}
		}

	}

	//
	.top-lines {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.cost-hint {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #919293;
		}

		.right-time {
			display: flex;
			align-items: center;

			.price {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #0F0807;
			}

			.time {
				height: 46rpx;
				background: #FDE5E4;
				border-radius: 10rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #EF5233;
				padding: 0 18rpx;
				line-height: 46rpx;
				margin-right: 29rpx;
			}
		}
	}

	//
	.technician-info {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.technician {
		height: 139rpx;
		box-sizing: border-box;
		width: fit-content;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background: rgba(239, 82, 51, 0.1);
		border-radius: 14rpx;
		border: 1rpx solid #EF5233;
		margin-right: 20rpx;

		.technician-img {
			width: 80rpx;
			height: 100rpx;
			flex: 0 0 auto;
		}

		.right-technician-info {
			flex: 0 0 auto;
			margin-left: 20rpx;

			.user-name {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #EF5233;
			}

			.age-address {
				display: flex;
				align-items: center;
				margin: 10rpx 0;

				view {
					height: 26rpx;
					background: rgba(239, 82, 51, 0.2);
					border-radius: 6rpx;
					padding: 0 8rpx;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #EF5233;
					line-height: 26rpx;

				}
			}

			.distance {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #EF5233;
				display: flex;
				align-items: center;

				image {
					width: 13rpx;
					height: 16rpx;
				}
			}

		}
	}

	//
	.huan-content {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #0F0807;
		width: 170rpx;
		height: 139rpx;
		background: #F5F6F7;
		border-radius: 14rpx;
		text-align: center;
		padding-top: 29rpx;

		image {
			width: 39rpx;
			height: 40rpx;

		}
	}

	//
	.order-comments {
		background-color: #F9FAFB;
		margin-top: 30rpx;
		height: 160rpx;
	}
	//
	.paytype{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		.paytype-lines{
			display: flex;
			align-items: center;
			width: 300rpx;
			height: 104rpx;
			background: #F5F6F7;
			border-radius: 20rpx;
			padding: 0 25rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #0F0807;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 14rpx;
			}
		}
	}
	.right-pay{
		height: 120rpx;
		background: #FEFFFF;
		box-sizing: border-box;
		padding-top: 16rpx;
		button{
			border: 0;
		}
		button{
			width: 690rpx;
			height: 88rpx;
			background: #EF5233;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>